<template>
  <div class="channel-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>渠道管理</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleAdd">
              <el-icon><Plus /></el-icon>
              新增渠道
            </el-button>
            <el-button type="success" @click="handleRefresh">
              <el-icon><Refresh /></el-icon>
              刷新状态
            </el-button>
          </div>
        </div>
      </template>

      <!-- 搜索表单 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="渠道名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入渠道名称"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="渠道类型">
          <el-select v-model="searchForm.type" placeholder="请选择渠道类型" clearable>
            <el-option label="上游渠道" value="upstream" />
            <el-option label="下游渠道" value="downstream" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="正常" value="active" />
            <el-option label="暂停" value="paused" />
            <el-option label="异常" value="error" />
            <el-option label="禁用" value="disabled" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 渠道列表 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="channelName" label="渠道名称" min-width="150" />
        <el-table-column prop="channelType" label="渠道类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getChannelTypeType(row.channelType)">
              {{ getChannelTypeLabel(row.channelType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              <el-icon v-if="row.status === 'error'" style="margin-right: 4px">
                <Warning />
              </el-icon>
              <el-icon v-if="row.status === 'active' || row.status === 'enabled'" style="margin-right: 4px">
                <CircleCheck />
              </el-icon>
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="successRate" label="成功率" width="100">
          <template #default="{ row }">
            <el-progress
              :percentage="row.successRate || 0"
              :color="getSuccessRateColor(row.successRate)"
              :stroke-width="6"
            />
          </template>
        </el-table-column>
        <el-table-column prop="dailyLimit" label="每日限额" width="120" />
        <el-table-column prop="todayPullCount" label="今日推送" width="120" />
        <el-table-column prop="avgResponseTime" label="平均响应时间(ms)" width="150" />
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="{ row }">
            <el-rate
              v-model="row.priority"
              disabled
              :max="5"
              :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            />
          </template>
        </el-table-column>
        <el-table-column prop="lastPushTime" label="最后推送时间" width="160" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button type="warning" link @click="handleConfig(row)">
              <el-icon><Setting /></el-icon>
              配置
            </el-button>
            <el-dropdown @command="handleCommand($event, row)">
              <el-button type="info" link>
                <el-icon><MoreFilled /></el-icon>
                更多
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="test">
                    <el-icon><Position /></el-icon>
                    测试连接
                  </el-dropdown-item>
                  <el-dropdown-item command="pause" v-if="row.status === 'active'">
                    <el-icon><VideoPause /></el-icon>
                    暂停推送
                  </el-dropdown-item>
                  <el-dropdown-item command="resume" v-if="row.status === 'paused'">
                    <el-icon><VideoPlay /></el-icon>
                    恢复推送
                  </el-dropdown-item>
                  <el-dropdown-item command="stats">
                    <el-icon><TrendCharts /></el-icon>
                    查看统计
                  </el-dropdown-item>
                  <el-dropdown-item command="delete" divided>
                    <el-icon><Delete /></el-icon>
                    删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="formDialog.visible"
      :title="formDialog.title"
      width="600px"
      class="responsive-dialog"
    >
      <el-form
        ref="channelFormRef"
        :model="formDialog.form"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="渠道名称" prop="channelName">
          <el-input v-model="formDialog.form.channelName" placeholder="请输入渠道名称" />
        </el-form-item>
        <el-form-item label="渠道类型" prop="channelType">
          <el-select v-model="formDialog.form.channelType" placeholder="请选择渠道类型">
            <el-option label="上游渠道" value="upstream" />
            <el-option label="下游渠道" value="downstream" />
          </el-select>
        </el-form-item>
        <el-form-item label="API地址" prop="apiEndpoint">
          <el-input v-model="formDialog.form.apiEndpoint" placeholder="请输入API地址" />
        </el-form-item>
        <el-form-item label="API密钥" prop="apiKey">
          <el-input v-model="formDialog.form.apiKey" placeholder="请输入API密钥" show-password />
        </el-form-item>
        <el-form-item label="每日限额" prop="dailyLimit">
          <el-input-number v-model="formDialog.form.dailyLimit" :min="1" :max="10000" />
        </el-form-item>
        <el-form-item label="优先级" prop="priority">
          <el-rate v-model="formDialog.form.priority" :max="5" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formDialog.form.status">
            <el-radio label="enabled">正常</el-radio>
            <el-radio label="disabled">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input
            v-model="formDialog.form.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入渠道描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="formDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 渠道配置对话框 -->
    <el-dialog
      v-model="configDialog.visible"
      title="渠道配置"
      width="800px"
      class="responsive-dialog"
    >
      <el-tabs v-model="configDialog.activeTab">
        <el-tab-pane label="API配置" name="api">
          <el-form :model="configDialog.form" label-width="120px">
            <el-form-item label="请求方式">
              <el-radio-group v-model="configDialog.form.method">
                <el-radio label="GET">GET</el-radio>
                <el-radio label="POST">POST</el-radio>
                <el-radio label="PUT">PUT</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="超时时间(秒)">
              <el-input-number v-model="configDialog.form.timeout" :min="1" :max="300" />
            </el-form-item>
            <el-form-item label="重试次数">
              <el-input-number v-model="configDialog.form.retryCount" :min="0" :max="5" />
            </el-form-item>
            <el-form-item label="请求头">
              <el-input
                v-model="configDialog.form.headers"
                type="textarea"
                :rows="3"
                placeholder='{"Content-Type": "application/json"}'
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="字段映射" name="mapping">
          <el-table :data="configDialog.fieldMappings" border style="width: 100%">
            <el-table-column prop="localField" label="本地字段" width="150" />
            <el-table-column prop="channelField" label="渠道字段" width="150">
              <template #default="{ row }">
                <el-input v-model="row.channelField" placeholder="渠道字段名" />
              </template>
            </el-table-column>
            <el-table-column prop="fieldType" label="字段类型" width="120">
              <template #default="{ row }">
                <el-select v-model="row.fieldType" placeholder="类型">
                  <el-option label="字符串" value="string" />
                  <el-option label="数字" value="number" />
                  <el-option label="日期" value="date" />
                  <el-option label="布尔值" value="boolean" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="isRequired" label="必填" width="80">
              <template #default="{ row }">
                <el-checkbox v-model="row.isRequired" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="{ $index }">
                <el-button type="danger" link @click="removeFieldMapping($index)">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px">
            <el-button type="primary" @click="addFieldMapping">
              <el-icon><Plus /></el-icon>
              添加映射
            </el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="质量监控" name="quality">
          <el-form :model="configDialog.form" label-width="120px">
            <el-form-item label="成功率阈值(%)">
              <el-slider v-model="configDialog.form.successRateThreshold" :min="0" :max="100" />
            </el-form-item>
            <el-form-item label="响应时间阈值(ms)">
              <el-input-number v-model="configDialog.form.responseTimeThreshold" :min="100" :max="10000" />
            </el-form-item>
            <el-form-item label="异常检测">
              <el-switch v-model="configDialog.form.enableHealthCheck" />
            </el-form-item>
            <el-form-item label="检测间隔(分钟)">
              <el-input-number v-model="configDialog.form.healthCheckInterval" :min="1" :max="1440" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="configDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveConfig" :loading="configLoading">
            保存配置
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 渠道统计对话框 -->
    <el-dialog
      v-model="statsDialog.visible"
      title="渠道数据统计"
      width="900px"
      class="responsive-dialog"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>推送统计</span>
            </template>
            <div class="stat-item">
              <div class="stat-label">今日推送</div>
              <div class="stat-value">{{ statsDialog.stats.todayCount }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">本周推送</div>
              <div class="stat-value">{{ statsDialog.stats.weekCount }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">本月推送</div>
              <div class="stat-value">{{ statsDialog.stats.monthCount }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>质量统计</span>
            </template>
            <div class="stat-item">
              <div class="stat-label">成功率</div>
              <div class="stat-value">
                <el-progress :percentage="statsDialog.stats.successRate" />
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-label">平均响应时间</div>
              <div class="stat-value">{{ statsDialog.stats.avgResponseTime }}ms</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">异常次数</div>
              <div class="stat-value">{{ statsDialog.stats.errorCount }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="24">
          <el-card>
            <template #header>
              <span>趋势图表</span>
            </template>
            <div ref="trendChart" class="chart-container"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import * as echarts from 'echarts'
import {
  getUpstreamChannels,
  createUpstreamChannel,
  updateUpstreamChannel,
  deleteUpstreamChannel,
  testChannelConnection,
  getChannelStats,
  updateChannelConfig,
  getDownstreamChannels,
  createDownstreamChannel,
  updateDownstreamChannel,
  deleteDownstreamChannel
} from '@/api/channel'

// 表格数据
const loading = ref(false)
const tableData = ref([])
const selectedRows = ref([])

// 搜索表单
const searchForm = reactive({
  name: '',
  type: '',
  status: ''
})

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 表单引用
const channelFormRef = ref<FormInstance>()

// 对话框状态
const formDialog = reactive({
  visible: false,
  title: '新增渠道',
  form: {
    id: '',
    name: '',
    type: 'upstream',
    apiUrl: '',
    apiKey: '',
    dailyLimit: 1000,
    priority: 3,
    status: 'active',
    description: ''
  }
})

const configDialog = reactive({
  visible: false,
  activeTab: 'api',
  form: {
    method: 'POST',
    timeout: 30,
    retryCount: 3,
    headers: '',
    successRateThreshold: 80,
    responseTimeThreshold: 5000,
    enableHealthCheck: true,
    healthCheckInterval: 60
  },
  fieldMappings: []
})

const statsDialog = reactive({
  visible: false,
  stats: {
    todayCount: 0,
    weekCount: 0,
    monthCount: 0,
    successRate: 0,
    avgResponseTime: 0,
    errorCount: 0
  }
})

// 表单验证规则
const formRules: FormRules = {
  channelName: [{ required: true, message: '请输入渠道名称', trigger: 'blur' }],
  channelType: [{ required: true, message: '请选择渠道类型', trigger: 'change' }],
  apiEndpoint: [{ required: true, message: '请输入API地址', trigger: 'blur' }],
  dailyLimit: [{ required: true, message: '请输入每日限额', trigger: 'blur' }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

// 获取渠道类型标签
const getChannelTypeLabel = (type: string) => {
  const labels: Record<string, string> = {
    upstream: '上游渠道',
    downstream: '下游渠道'
  }
  return labels[type] || type
}

// 获取渠道类型样式
const getChannelTypeType = (type: string) => {
  const types: Record<string, string> = {
    upstream: 'primary',
    downstream: 'success'
  }
  return types[type] || 'info'
}

// 获取状态标签
const getStatusLabel = (status: string) => {
  const labels: Record<string, string> = {
    active: '正常',
    paused: '暂停',
    error: '异常',
    disabled: '禁用'
  }
  return labels[status] || status
}

// 获取状态样式
const getStatusType = (status: string) => {
  const types: Record<string, string> = {
    active: 'success',
    paused: 'warning',
    error: 'danger',
    disabled: 'info'
  }
  return types[status] || 'info'
}

// 获取成功率颜色
const getSuccessRateColor = (rate: number) => {
  if (rate >= 90) return '#67C23A'
  if (rate >= 70) return '#E6A23C'
  return '#F56C6C'
}

// 获取排名颜色
const getRankingColor = (index: number) => {
  const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7']
  return colors[index] || '#BDC3C7'
}

// 获取渠道列表
const fetchData = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.currentPage,
      pageSize: pagination.pageSize,
      channelName: searchForm.name,
      status: searchForm.status,
      channelType: searchForm.type
    }
    
    let res
    if (searchForm.type === 'upstream') {
      res = await getUpstreamChannels(params)
    } else if (searchForm.type === 'downstream') {
      res = await getDownstreamChannels(params)
    } else {
      // 获取所有渠道
      const [upstreamRes, downstreamRes] = await Promise.all([
        getUpstreamChannels(params),
        getDownstreamChannels(params)
      ])
      res = {
        rows: [...upstreamRes.rows, ...downstreamRes.rows],
        total: upstreamRes.total + downstreamRes.total
      }
    }
    
    tableData.value = res.rows
    pagination.total = res.total
  } catch (error) {
    ElMessage.error('获取渠道列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1
  fetchData()
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    type: '',
    status: ''
  })
  handleSearch()
}

// 分页
const handleSizeChange = (val: number) => {
  pagination.pageSize = val
  fetchData()
}

const handleCurrentChange = (val: number) => {
  pagination.currentPage = val
  fetchData()
}

// 选择行
const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows
}

// 新增
const handleAdd = () => {
  formDialog.title = '新增渠道'
  formDialog.form = {
    id: '',
    channelName: '',
    channelType: 'upstream',
    apiEndpoint: '',
    apiKey: '',
    dailyLimit: 1000,
    priority: 3,
    status: 'enabled',
    remark: ''
  }
  formDialog.visible = true
}

// 编辑
const handleEdit = (row: any) => {
  formDialog.title = '编辑渠道'
  formDialog.form = {
    id: row.id,
    channelName: row.channelName,
    channelType: row.channelType,
    apiEndpoint: row.apiEndpoint,
    apiKey: row.apiKey,
    dailyLimit: row.dailyLimit,
    priority: row.priority,
    status: row.status,
    remark: row.remark
  }
  formDialog.visible = true
}

// 配置
const handleConfig = (row: any) => {
  configDialog.visible = true
  configDialog.form = {
    method: row.method || 'POST',
    timeout: row.timeout || 30,
    retryCount: row.retryCount || 3,
    headers: row.headers || '',
    successRateThreshold: row.successRateThreshold || 80,
    responseTimeThreshold: row.responseTimeThreshold || 5000,
    enableHealthCheck: row.enableHealthCheck || true,
    healthCheckInterval: row.healthCheckInterval || 60
  }
  configDialog.fieldMappings = row.fieldMappings || []
}

// 更多操作
const handleCommand = async (command: string, row: any) => {
  switch (command) {
    case 'test':
      try {
        const res = await testChannelConnection(row.id)
        if (res.success) {
          ElMessage.success('连接测试成功')
        } else {
          ElMessage.error('连接测试失败: ' + res.message)
        }
      } catch (error) {
        ElMessage.error('连接测试失败')
      }
      break
    case 'pause':
      try {
        if (row.channelType === 'upstream') {
          await updateUpstreamChannel(row.id, { ...row, status: 'disabled' })
        } else {
          await updateDownstreamChannel(row.id, { ...row, status: 'disabled' })
        }
        ElMessage.success('渠道已暂停')
        fetchData()
      } catch (error) {
        ElMessage.error('操作失败')
      }
      break
    case 'resume':
      try {
        if (row.channelType === 'upstream') {
          await updateUpstreamChannel(row.id, { ...row, status: 'enabled' })
        } else {
          await updateDownstreamChannel(row.id, { ...row, status: 'enabled' })
        }
        ElMessage.success('渠道已恢复')
        fetchData()
      } catch (error) {
        ElMessage.error('操作失败')
      }
      break
    case 'stats':
      await handleStats(row)
      break
    case 'delete':
      await handleDelete(row)
      break
  }
}

// 查看统计
const handleStats = async (row: any) => {
  try {
    const res = await getChannelStats(row.id)
    statsDialog.stats = res
    statsDialog.visible = true
    
    // 初始化图表
    nextTick(() => {
      initTrendChart()
    })
  } catch (error) {
    ElMessage.error('获取统计数据失败')
  }
}

// 初始化趋势图表
const initTrendChart = () => {
  const chartDom = document.querySelector('.chart-container')
  if (!chartDom) return
  
  const myChart = echarts.init(chartDom)
  const option = {
    title: {
      text: '推送趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['推送数量', '成功数量']
    },
    xAxis: {
      type: 'category',
      data: statsDialog.stats.trendData?.dates || []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '推送数量',
        type: 'line',
        data: statsDialog.stats.trendData?.pushCounts || [],
        smooth: true
      },
      {
        name: '成功数量',
        type: 'line',
        data: statsDialog.stats.trendData?.successCounts || [],
        smooth: true
      }
    ]
  }
  
  myChart.setOption(option)
}

// 删除
const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm('确定要删除该渠道吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    if (row.channelType === 'upstream') {
      await deleteUpstreamChannel(row.id)
    } else {
      await deleteDownstreamChannel(row.id)
    }
    ElMessage.success('删除渠道成功')
    fetchData()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 刷新状态
const handleRefresh = () => {
  fetchData()
  ElMessage.success('状态已刷新')
}

// 提交表单
const handleSubmit = async () => {
  if (!channelFormRef.value) return
  
  await channelFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        if (formDialog.title === '新增渠道') {
          if (formDialog.form.channelType === 'upstream') {
            await createUpstreamChannel(formDialog.form)
          } else {
            await createDownstreamChannel(formDialog.form)
          }
          ElMessage.success('新增渠道成功')
        } else {
          if (formDialog.form.channelType === 'upstream') {
            await updateUpstreamChannel(formDialog.form.id, formDialog.form)
          } else {
            await updateDownstreamChannel(formDialog.form.id, formDialog.form)
          }
          ElMessage.success('更新渠道成功')
        }
        formDialog.visible = false
        fetchData()
      } catch (error) {
        ElMessage.error('操作失败')
      }
    }
  })
}

// 添加字段映射
const addFieldMapping = () => {
  configDialog.fieldMappings.push({
    localField: '',
    channelField: '',
    fieldType: 'string',
    isRequired: false
  })
}

// 删除字段映射
const removeFieldMapping = (index: number) => {
  configDialog.fieldMappings.splice(index, 1)
}

// 保存配置
const handleSaveConfig = async () => {
  try {
    await updateChannelConfig(configDialog.form)
    ElMessage.success('配置保存成功')
    configDialog.visible = false
    fetchData()
  } catch (error) {
    ElMessage.error('配置保存失败')
  }
}

// 初始化
onMounted(() => {
  fetchData()
})
</script>

<style scoped lang="scss">
.channel-management {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .search-form {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .stat-label {
      color: #666;
      font-size: 14px;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }

  .chart-container {
    width: 100%;
    height: 300px;
  }

  // 响应式设计
  @media screen and (max-width: 768px) {
    .card-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .pagination {
      justify-content: center;
    }
  }
}
</style>